<template>
    <div id="article">
        <div class="articleTitle">
            讨论
            <div class='articleTitles'><router-link to="/index/content" ><a href="">探索更多</a></router-link></div>
        </div>
        <div class="articles">
            <div class="atLeft">
                <div class="atImg1">
                    <img :src="`http://localhost:3000/upload/${hometopic[0].aImg}`" alt="">
                </div>
                <div class="atText">
                    <div class="atTexta">
                        <a href="">{{hometopic[0].title}}</a>
                    </div>
                    <div class='atWriter'>By <a href="">{{hometopic[0].nickName}}</a> · {{hometopic[0].pTime | time}} · {{hometopic[0].likeClick}}次点赞</div>
                </div>
            </div>
            <div class="atRight">
                <div class="atdivs" v-for="topic in hometopic.slice(1,5)" :key="topic">
                    <div class="atImg2">
                        <img :src="`http://localhost:3000/upload/${topic.aImg}`" alt="">
                    </div>
                    <div class='atText2'>
                        <div class="atTextp">{{topic.label}}</div>
                        <div class="atTexta">
                            <a href="">{{topic.title}}</a>
                        </div>
                        <div class='atWriter'>By <a href="">{{topic.nickName}}</a> · {{topic.pTime | time}} · {{topic.likeClick}}次点赞</div>
                    </div>
                </div>
                
                
            </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            hometopic:''
        }
    },
    created(){
         this.$axios.get('/api/homepage/topic')
        .then(res=>{
        //   console.log('res:',res.data)
          this.hometopic=res.data.data
        //   console.log(this.homeartice.data[0])
        })
        .catch(err=>{
          console.log('err:',err)
        })
    },
    filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break 
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
    }
}
</script>
<style >
#article{
            top: 100%;
            position: relative;
            width: 100%;
            height:1000px;
            background-color:#f1f4f7;
            min-height: 100px;
            box-sizing: border-box!important;
            padding-top: 120px;
        }
        #article .articleTitle{
            position: relative;
            margin-top: 20px;
            margin-bottom: 20px;
            left: 50%;
            width: 1200px;
            height:60px;
            padding-bottom: 30px;
            transform: translateX(-50%);
            color: rgba(0,0,0,.1);
            font-size: 50px;
            font-weight: 700;
            font-family: "黑体",cursive;
        }
        #article .articleTitle .articleTitles{
            position:absolute;
            width: 1200px;
            height:60px;
            line-height: 50px;
            top: 0;
            /* font-weight: 400; */
            margin-bottom: 20px;
            padding-left: 110px;
            box-sizing: border-box;
        }
        #article .articleTitle .articleTitles a{
            letter-spacing:3px;
            font-family:weiruanyahei;
            font-size: 22px;
            color:  rgba(25,161,253,1);
            text-decoration: none;
            transition: all 0.4s;
        }
        #article .articleTitle .articleTitles a:hover{
            color:  rgba(13, 105, 224, 0.9);

        }
        #article .articles{
            width: 1200px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin:20px 0px;
        }
        #article .atLeft{
            float: left;
            width: 690px;
            /* margin-left:15px; */
            /* margin-top:15px; */
            background-color: white;
        }
        #article .atLeft .atImg1{
            overflow: hidden;
            width: 690px;
            height: 410px;
        }
        #article .atLeft img{
            width: 690px;
            height: 410px;
            transition: all .3s;
        }
        #article .atLeft img:hover{
            transform: scale(1.1); 
        }
        #article .atLeft .atText{
            width: 690px;
            height: 160px;
            padding: 20px 30px;
            box-sizing: border-box;
        }
        #article .atLeft .atTexta{
            width: 600px;
            margin-bottom: 20px;
            height: 70px;
            line-height: 35px;
        }
        #article .atLeft .atTexta a{
            font-size: 32px;
            font-weight: 700;
            color: black;
            letter-spacing:1px;
            text-decoration: none;
            transition: all .7s;
            /* width: 300px; */
        }
        #article .atLeft .atTexta a:hover{
            color: rgb(25,167,253);
        }
        #article .atLeft .atWriter{
            color:rgba(10,10,10,0.7)
        }
        #article .atLeft .atWriter a{
            font-weight: 800;
            color: black;
            letter-spacing:1px;
            text-decoration: none;
            transition: all .7s;
        }
        #article .atLeft .atWriter a:hover{
            color:rgb(25,167,253);
        }
        #article .atRight{
            float: right;
            height: 200px;
            width: 460px;
        }
        #article .atRight .atdivs{
            position: relative;
            width: 460px;
            height: 130px;
            margin-bottom: 30px;
            /* padding-right: 60px; */
            /* box-sizing: border-box; */
        }
        #article .atRight .atdivs .atImg2{
            float: left;
        }
        #article .atRight .atdivs img{
            width: 130px;
            height: 130px;
            float: left;
            object-fit: cover;
        }
        #article .atRight .atdivs .atText2{
            float: left;
            margin-left: 20px;
        }
        #article .atRight .atdivs .atText2 .atTexta{
            width: 260px;
            margin-top: 10px;
            margin-bottom: 4px;
            max-height: 78px;
        }
        #article .atRight .atdivs .atText2 a{
            font-size: 18px;
            line-height: 26px;
            font-weight: 700;
            color: #000;
            text-decoration: none;
            transition: all .3s;
        }
        #article .atRight .atdivs .atText2 a:hover{
            color: rgb(25,167,253);
        }
        #article .atRight .atdivs .atText2 .atTextp{
            background-color: rgb(25,167,253);
            height:22px;
            line-height: 22px;
            /* box-sizing: border-box; */
            padding:1px 15px;
            border-radius: 15px;
            /* font-weight: 700; */
            color:white;
            letter-spacing:2px;
            display: inline-block;
        }
        
        #article .atRight .atdivs .atText2 .atWriter{
            font-size: 13px;
            color: rgba(10,10,10,0.7);
        }
        #article .atRight .atdivs .atText2 .atWriter a{
            font-size: 13px;
            transition: all .3s;
        }
        #article .atRight .atdivs .atText2 .atWriter a:hover{
            color: rgb(25,167,253);
        }
</style>